<template>
  <view class="personal-center">
    <!-- 顶部背景 -->
    <view class="header-bg"></view>
    
    <!-- 个人信息卡片 -->
    <view class="user-card">
      <view class="avatar-container">
        <image class="avatar" src="https://img0.baidu.com/it/u=888629053,4163929910&fm=253&fmt=auto&app=138&f=JPEG?w=324&h=324" mode="aspectFill"></image>
        <!-- <view class="edit-avatar" @click="editAvatar">
          <text class="iconfont">✎</text>
        </view> -->
      </view>
      
      <view class="user-info">
        <text class="username">{{ userInfo.username || '未设置昵称' }}</text>
        <text class="phone">{{ userInfo.phone || '未绑定手机号' }}</text>
        
      </view>
    </view>
    
    <!-- <view class="menu-container">
      <view class="menu-group">
        <view class="menu-item" @click="navigateTo('orders')">
          <text class="menu-icon">🛒</text>
          <text class="menu-text">我的订单</text>
          <text class="badge" v-if="userInfo.pendingOrders > 0">{{ userInfo.pendingOrders }}</text>
        </view>
        
        <view class="menu-item" @click="navigateTo('favorites')">
          <text class="menu-icon">❤️</text>
          <text class="menu-text">我的收藏</text>
        </view>
        
        <view class="menu-item" @click="navigateTo('address')">
          <text class="menu-icon">🏠</text>
          <text class="menu-text">收货地址</text>
        </view>
      </view>
      
      <view class="menu-group">
        <view class="menu-item" @click="navigateTo('settings')">
          <text class="menu-icon">⚙️</text>
          <text class="menu-text">账号设置</text>
        </view>
        
        <view class="menu-item" @click="navigateTo('feedback')">
          <text class="menu-icon">📞</text>
          <text class="menu-text">联系客服</text>
        </view>
        
        <view class="menu-item" @click="navigateTo('about')">
          <text class="menu-icon">ℹ️</text>
          <text class="menu-text">关于我们</text>
        </view>
      </view>
    </view> -->
    
    <!-- 退出按钮 -->
    <view class="logout-btn" @click="logout">
      <text>退出登录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: 'admin',
        phone: uni.getStorageSync('phone'),
        avatar: '/static/avatar.png',
        credit: 1250,
        level: 5,
        vipDays: 30,
        pendingOrders: 3
      }
    };
  },
  methods: {
    // 编辑头像
    editAvatar() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          // 上传头像逻辑
          console.log('选择新头像:', res.tempFilePaths[0]);
          // 更新头像
          this.userInfo.avatar = res.tempFilePaths[0];
        }
      });
    },
    
    // 页面跳转
    navigateTo(page) {
      uni.navigateTo({
        url: `/pages/${page}/${page}`
      });
    },
    
    // 退出登录
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出当前账号吗？',
        confirmColor: '#E53935',
        success: (res) => {
          if (res.confirm) {
            // 清除本地存储
            uni.removeStorageSync('access_token');
            uni.removeStorageSync('refresh_token');
            
            // 跳转到登录页
            uni.reLaunch({
              url: '/pages/login/login'
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.personal-center {
  background-color: #f7f8fa;
  min-height: 100vh;
}

.header-bg {
  height: 300rpx;
  background: linear-gradient(135deg, #306EFF, #1E50A2);
  position: relative;
  z-index: 1;
}

.user-card {
  background-color: #fff;
  border-radius: 16rpx;
  margin: -150rpx 30rpx 0;
  padding: 30rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

.avatar-container {
  position: relative;
  margin-right: 30rpx;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.edit-avatar {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48rpx;
  height: 48rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24rpx;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.phone {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 24rpx;
}

.user-stats {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  display: block;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-top: 4rpx;
}

.menu-container {
  margin: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.menu-group {
  border-bottom: 1rpx solid #f5f5f5;
}

.menu-group:last-child {
  border-bottom: none;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  position: relative;
}

.menu-item::after {
  content: '';
  position: absolute;
  left: 30rpx;
  right: 30rpx;
  bottom: 0;
  height: 1rpx;
  background-color: #f5f5f5;
  transform: scaleY(0.5);
}

.menu-item:last-child::after {
  display: none;
}

.menu-icon {
  font-size: 36rpx;
  width: 50rpx;
  display: inline-block;
  margin-right: 24rpx;
  color: #306EFF;
}

.menu-text {
  font-size: 32rpx;
  color: #333;
  flex: 1;
}

.badge {
  background-color: #FF4500;
  color: #fff;
  font-size: 20rpx;
  padding: 2rpx 10rpx;
  border-radius: 12rpx;
}

.logout-btn {
  margin: 60rpx 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #FF4500;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
</style>